<template>
	<view>
		<!-- 购物车 -->
		<view class="mycart">
			<!-- 共几件商品 -->
			<view class="head">共{{totalnum}}件商品</view>
			<!-- 商品 -->
			<view class="head-goods" v-for="item in mycartList" :key="item.id">
				<!-- 左侧图片 -->
				<view class="head-left">
					<image class="head-left-img1" :src="item.cartselect==false?'../../static/shop_detail_imgs/未选中.png':'../../static/shop_detail_imgs/选中.png'" @click="select" :data-id="item.id"></image>
					<image class="head-left-img2" :src="item.src"></image>
				</view>
				<!-- 右侧介绍 -->
				<view class="head-right">
					<!-- 商品名 -->
					<view class="head-right-name">{{item.name}}</view>
					<!-- 价格，数量 -->
					<view class="head-right-bottom">
						<!-- 价格 -->
						<view>￥{{item.price*item.num}}</view>
							<!-- 数量 -->
							<view class="head-right-bottom-count">
								<view class="head-right-bottom-count-text1" :data-id="item.id" @click="reduce">-</view>
								<view class="head-right-bottom-count-text2">{{item.num}}</view>
								<view class="head-right-bottom-count-text3" :data-id="item.id" @click="add">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="coupon-head">· 店铺推荐 ·</view>
			<!-- 商品列表 -->
			<view class="goodsList">
				<!-- 商品 -->
				<view class="goods" v-for="item in orderList" :key="item.id">
					<image class="goods-img" :src="item.src"></image>
					<view class="goods-name">{{item.name}}</view>
					<view class="goods-other">
						<view class="goods-price">
							<text class="goods-price-text1">{{item.price}}</text>
							<text class="goods-price-text2">元</text>
						</view>
						<view class="goods-icons" :data-id='item.id' @click="gouwuche">
							<image src="../../static/shop_detail_imgs/购物车.png"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 结算 -->
			<view class="count" v-if="totalprice<200">
				<view class="count-left">
					<view @click="selectAll" style="height: 8vw;">
						<image class="count-left-img" :src="selectall==false?'../../static/shop_detail_imgs/未选中.png':'../../static/shop_detail_imgs/选中.png'"></image>
						<view class="select-all">全选</view>
					</view>
					<view class="count-left-text" v-if="totalprice==0">购物车是空的哦~</view>
					<view class="count-left-text" v-if="totalprice!=0">共{{totalprice}}元</view>
				</view>
				<view class="count-right">200元起送</view>
			</view>
			<view class="count" v-if="totalprice>=200">
				<view class="count-left2">
					<view @click="selectAll"  style="height: 8vw;">
						<image class="count-left-img" :src="selectall?'../../static/shop_detail_imgs/未选中.png':'../../static/shop_detail_imgs/选中.png'"></image>
						<view class="select-all">全选</view>
					</view>
					<view class="count-left-text">共{{totalprice}}元</view>
				</view>
				<view class="count-right2" v-if="totalprice!=0">去结算</view>
			</view>
			<!-- 占位 -->
			<view style="height: 10vw;"></view>
		</view>
	</view>
</template>

<script>
	var orderList = getApp().globalData.orderList
	export default {
		data() {
			return {
				class_list: [{
						id: 1,
						name: '蔬菜类',

					},
					{
						id: 2,
						name: '水果类',

					},
					{
						id: 3,
						name: '海鲜类',

					},
					{
						id: 4,
						name: '海贝类',

					},
					{
						id: 5,
						name: '家禽类',

					},
					{
						id: 6,
						name: '鸡鸭肉类',

					},
					{
						id: 7,
						name: '熟食类',

					},
					{
						id: 8,
						name: '豆制品',

					}
				],
				shop: null,
				orderList: [],
				totalprice: 0,
				totalnum:0,
				selectall: false,
				mycartList: []
			}
		},
		methods: {
			loding(){
				this.mycartList=[]
				this.totalnum=0
				this.totalprice=0
				orderList.forEach(item => item.num!=0 ? this.mycartList.push(item) : '')
				orderList.forEach(item => item.num!=0 ? this.totalnum+=item.num : '')
				orderList.forEach(item => item.cartselect ? this.totalprice+=item.price*item.num : '')
			},
			gouwuche(e) {
				let id = e.currentTarget.dataset.id
				this.orderList.forEach(v => v.id == id ? v.num += 1 : '');
				this.loding()
			},
			reduce(e){
				let id = e.currentTarget.dataset.id
				this.orderList.forEach(v => v.id == id ? v.num -= 1 : '');
				this.loding()
			},
			add(e){
				let id = e.currentTarget.dataset.id
				this.orderList.forEach(v => v.id == id ? v.num += 1 : '');
				this.loding()
			},
			select(e){
				this.totalprice=0
				let id=e.currentTarget.dataset.id
				this.orderList.forEach(item => item.id == id ? item.cartselect =!item.cartselect : '');
				orderList.forEach(item => item.cartselect ? this.totalprice+=item.price*item.num : '')
			},
			selectAll(){
				this.totalprice=0
				this.selectall=!this.selectall
				if(this.selectall){
					this.mycartList.forEach(item => item.cartselect=true)
					orderList.forEach(item => item.cartselect ? this.totalprice+=item.price*item.num : '')
				}else{
					this.mycartList.forEach(item => item.cartselect=false)
				}
			}
		},
		onLoad(options) {
			let shopId = options.shopId
			orderList.forEach(item => item.shopid == shopId ? this.orderList.push(item) : '')
			this.loding()
		},
	}
</script>

<style>
	page {
		background-color: rgb(246, 246, 246);
	}

	.mycart {
		background-color: #fff;
	}

	.head {
		padding: 2vw 3vw;
		font-size: 4vw;
		border-bottom: 1px solid #d9d9d9;
	}

	.head-goods {
		display: flex;
		padding: 3vw;
	}

	.head-left {
		display: flex;
		align-items: center;
	}

	.head-left-img1 {
		height: 8vw;
		width: 8vw;
		margin: 0 3vw 0 0;
	}

	.head-left-img2 {
		height: 20vw;
		width: 20vw;
		margin: 0 2vw 0 0;
	}
	.head-right{
		width: 70vw;
	}
	.head-right-name {
		height: 10vw;
		font-size: 4vw;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
	}

	.head-right-bottom {
		display: flex;
		height: 10vw;
		align-items: flex-end;
		justify-content: space-between;
	}

	.head-right-bottom-count {
		border-radius: 3px;
		height: 6vw;
		align-items: center;
		display: flex;
		border: 1px solid #BFCDD9;
		border-right: 1px;
		background-color: #BFCDD9;
	}

	.head-right-bottom-count-text1 {
		padding: 0 1.5vw;
		color: #fff;
	}

	.head-right-bottom-count-text2 {
		line-height: 6vw;
		height: 6vw;
		font-size: 3vw;
		border-left: 1px solid #BFCDD9;
		padding: 0 2vw;
		background-color: #fff;
	}

	.head-right-bottom-count-text3 {
		line-height: 6vw;
		height: 6vw;
		color: #BFCDD9;
		padding: 0 1vw;
		background-color: #fff;
		border: 1px solid #BFCDD9;
		border-radius: 0 3px 3px 0;
	}

	.coupon-head {
		background-color: #fff;
		padding: 2vh 0;
		text-align: center;
		margin: 0 auto;
		font-weight: 700;
	}

	.goodsList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goods {
		background-color: #fff;
		width: 46vw;
		border-radius: 3vw;
		margin: 2vw;
	}

	.goods-img {
		width: 45vw;
		height: 45vw;
		border-radius: 3vw;
	}

	.goods-name {
		font-size: 3vw;
		width: 44vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding: 0 2vw;
	}

	.goods-other {
		display: flex;
		margin: 2vw 2vw;
		justify-content: space-between;
		align-items: center;
	}

	.goods-price {}

	.goods-price-text1 {
		font-size: 4vw;
	}

	.goods-price-text2 {
		font-size: 3vw;
	}

	.goods-icons image {
		width: 5vw;
		height: 5vw;
	}

	.count {
		position: fixed;
		display: flex;
		bottom: 0;
		height: 10vw;
		background-color: #fff;
	}

	.count-left {
		display: flex;
		width: 70vw;
		align-items: center;
		justify-content: center;
	}

	.count-left-img {
		width: 8vw;
		height: 8vw;
		position: absolute;
		left: 3vw;
	}

	.select-all {
		position: absolute;
		left: 12vw;
		top:2.5vw;
		font-size: 3.5vw;
	}

	.count-left-text {
		font-size: 3.5vw;
	}

	.count-right {
		text-align: center;
		font-size: 4vw;
		width: 30vw;
		background-color: #808080;
		color: #fff;
		line-height: 10vw;
	}

	.count-left2 {
		display: flex;
		width: 70vw;
		align-items: center;
		justify-content: flex-end;
		margin: 0 3vw 0 0;
	}

	.count-right2 {
		text-align: center;
		font-size: 4vw;
		width: 30vw;
		background-color: #FE0302;
		color: #fff;
		line-height: 10vw;
	}
</style>
